<template>
    <div style="padding-top: 15px; background: rgb(244,244,246);">
        <!-- 时间区间 -->
        <el-date-picker
            v-model="time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>

        <el-card>
            <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                <div>员工报表</div>
<!--                <el-button type="primary">导出</el-button>-->
            </div>
            <!--列表-->
            <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border
                      element-loading-text="拼命加载中" style="width: 100%;">
                <el-table-column prop="empName" label="姓名" width="150">
                </el-table-column>
                <el-table-column sortable prop="followNum" label="跟进中" width="150">
                </el-table-column>
                <el-table-column sortable prop="dbNum" label="被分配" width="150">
                </el-table-column>
                <el-table-column sortable prop="PeopleNum" label="订单数" width="150">
                </el-table-column>
                <el-table-column sortable prop="join" label="成交金额" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="新客户" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="初步沟通" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="持续跟进" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="商机" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="成交" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="沟通客户数" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="有效沟通数" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="有效沟通率" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="新增好友数" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="新增好友跟进率" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="呼出总数" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="接通数" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="接通率" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="通话时长" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="有效通话数" width="150">
                </el-table-column>
                <el-table-column sortable prop="quit" label="有效通话时长" width="150">
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div style="display: flex; justify-content: flex-end;">
                <div style="width: 450px; height: 60px;">
                    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
    import Pagination from '@/components/Pagination'

    export default {
        props: {
            deptId: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                // 时间段
                time: '',
                // 列表数据
                listData: [],
                loading: false,
                // 分页参数
                pageparm: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                },
            }
        },
        watch: {
            deptId(n, o) {
                this.queryDataHandle()
            },
        },

        mounted() {
            this.queryDataHandle()
        },

        methods: {
            // 分页插件事件
            callFather(parm) {
                this.formInline.page = parm.currentPage
                this.formInline.limit = parm.pageSize
                this.getdata(this.queryData)
            },

            queryDataHandle() {
                let payData = {
                    deptId: this.deptId
                }
                let that = this
                let empIdList = []
                this.$request("/api/emp/getEmpList/1_0", payData, "POST").then((data) => {
                    this.empList = data.rows
                }).then(() => {
                    for (let i = 0; i < this.empList.length; i++) {
                        empIdList.push(this.empList[i].empId)
                    }
                }).then(() =>{
                    that.$request("/api/statistics/getAboutMemberByMember/1_0", empIdList, 'POST').then((data) => {
                        this.listData = data.rows
                    })
                });
            },
        },

        // 注册组件
        components: {
            Pagination
        }
        ,
        name: "AnalyzeEmp"
    }
</script>

<style scoped>
    .el-card {
        margin-top: 15px;
    }

    /deep/ .el-card__body {
        padding: 10px 12px;
    }
</style>
